<template>
	<view>
		<view class="top-search">
			<uni-search 
			:hascity='false' 
			:show="true" 
			@confirm="search"
			placeholder="请输入搜索的商品"
			v-model="params.name"
			/>
		</view>
		<view class="product-list">
			<product-list :list-data="listData" @imgClick="goDetail"></product-list>
			<uni-load-more :status="statusByhasMore" :icon-size="16" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniSearch from "@/components/search/search.vue";
	import productList from "@/pages/product/components/product-item.vue"
	export default{
		components: {
			uniSearch,
			productList
		},
		onLoad(options){
			uni.setNavigationBarTitle({
				title:options.text
			});
			this.getList();
		},
		onReachBottom() {
			if(this.hasMore){
				this.params.pageIndex+=1;
				this.getList();
			}
		},
		data() {
			return {
				params: {
					name:'',
					pageIndex:1,
					pageSize:10
				},
				listData:[],
				status:'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				reload: false,
				hasMore:true
			}
		},
		computed:{
			statusByhasMore(){
				return this.hasMore?(this.hasMore=='loading'?'loading':'more'):'nomore'
			}
		},
		methods:{
			search(){
				this.reload = true;
				this.params.pageIndex=1;
				this.getList();
			},
			goDetail(){
				// 前往详情页
				uni.navigateTo({
					url:'/pages/classify/detail?id=1'
				})
			},
			getList(){
				this.hasMore="loading";
				uniCloud.callFunction({
					name:"getProduct",
					data:this.params
				}).then(res=>{
					const {data,hasMore} = res.result;
					this.hasMore = hasMore;
					this.listData = this.reload ? data : this.listData.concat(data)
					if(this.reload){
						this.reload = false
					}
				}).catch((err)=>{
					console.log(`调用云函数失败，错误信息为：${err.message}`)
				})
			}
		}
	}
</script>

<style>
	.top-search{
		position: fixed;
		top: var(--window-top);
		z-index: 13;
		width: 100%;
		background-color: #fff;
	}
	.product-list{
		/* margin-top: calc(88rpx + var(--window-top)); */
		margin-top:108rpx
	}
</style>
